<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Resume</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link href="css/resume.css" rel="stylesheet" type="text/css" />
  <script src="js/resume.js" type="text/javascript"></script>
</head>

<body>
  <div class="head">
    <div class="head_top">
      <img src="images/fsd.png" class="left" />
      <img src="images/ljb.png" class="right" />
    </div>
    <div class="head_bottom">
      <ul>
        <li>
          <div><img src="images/head/ajax.jpg" /></div>
          <div>ajax</div>
        </li>
        <li>
          <div><img src="images/head/css.jpg" /></div>
          <div>css</div>
        </li>
        <li>
          <div><img src="images/head/php.jpg" /></div>
          <div>php</div>
        </li>
        <li>
          <div><img src="images/head/mysql.jpg" /></div>
          <div>mysql</div>
        </li>
        <li>
          <div><img src="images/head/ps.jpg" /></div>
          <div>ps</div>
        </li>
      </ul>
      <div class="clear"></div>
    </div>
  </div>
  <div class="body">
    <div class="me">
      <div class="top">
        <div>Me</div>
        <img src="images/ico/ico_me.png" />
      </div>
      <div class="meContent">
        <div class="mePic"></div>
        <div class="meIntro">
          <dl>
            <dt>姓名</dt>
            <dd>Listen</dd>
            <dt>性别</dt>
            <dd>男</dd>
            <dt>籍贯</dt>
            <dd>湖南益阳</dd>
            <dt>专业</dt>
            <dd>计算科学与技术</dd>
            <dt>职业</dt>
            <dd>码农</dd>
            <dt>喜好</dt>
            <dd>研究新技术</dd>
            <dt>最喜欢游戏</dt>
            <dd>狼人杀</dd>
            <dt>最喜欢电影</dt>
            <dd>肖申克的救赎</dd>
            <dt>最喜欢语言</dt>
            <dd>Javascript</dd>
            <dt>最喜欢软件</dt>
            <dd>Fiddler</dd>
            <dt>最喜欢系统</dt>
            <dd>Linux</dd>
            <dt>最喜欢编辑器</dt>
            <dd>Sublime</dd>
            <dt>最喜欢浏览器</dt>
            <dd>Chrome</dd>
            <dt>最喜欢的文章</dt>
            <dd>任正非：致新员工书</dd>
            <dt>最喜欢的格言</dt>
            <dd>猥琐发育别浪</dd>
          </dl>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="education">
      <div class="top">
        <div>Education</div>
        <img src="images/ico/ico_edu.png" />
      </div>
      <div>
        <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="white">
          <tr height="360">
            <td width="500">
              <div class="change">
                <img id="main_pic" />
              </div>
              <div class="thumb" id="thumb">
                <img src="images/csu/0.jpg" />
                <img src="images/csu/1.jpg" />
                <img src="images/csu/2.jpg" />
                <img src="images/csu/3.jpg" />
                <img src="images/csu/4.jpg" />
                <div class="clear"></div>
              </div>
            </td>
            <td width="500">
              <div class="backgroundPosition">
                2014毕业于中南大学，授予学士学位。中南大学坐落在中国历史文化名城湖南省长沙市，是中央直管、教育部直属的湖南省唯一副部级全国重点大学，国家“211工程”、“985工程”、“2011计划”首批重点建设的大学，是“111计划”、“卓越工程师教育培养计划”、“卓越医生教育培养计划”、“卓越法律人才教育培养计划”入选高校，是教育部、工业和信息化部、湖南省三方重点共建大学。
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="skill">
      <div class="top">
        <div>Skill</div>
        <img src="images/ico/ico_skill.png" />
      </div>
      <div class="skillContent">
        <div>
          <div class="w90">HTML5</div>
          <p>
            精通：热爱前端制做，擅于制作精美页面，熟悉页面架构和布局，响应式设计，能够解决各种浏览器兼容性问题。代码规范，符合W3C标准。
          </p>
        </div>
        <div>
          <div class="w90">CSS3</div>
          <p>
            精通：前端利器，要做得狂拽酷炫必须要的元素，现在会动起来的网页才叫真正的页面，喜欢简单有效整洁样式，让轻快浏览器跑起来。
          </p>
        </div>
        <div>
          <div class="w90">JS</div>
          <p>
            精通：傲娇的前端工程师都写原生JS，一门面向对象的脚本语言。操作DOM，BOM对象，犀利算法。原生代码的比任何插件跑起来溜。
          </p>
        </div>
        <div>
          <div class="w90">Jquery</div>
          <p>精通：减少很多工作量与兼容性问题。</p>
        </div>
        <div>
          <div class="w80">Vue</div>
          <p>精通：响应式构架。</p>
        </div>
        <div>
          <div class="w80">React</div>
          <p>精通：构建用户界面。</p>
        </div>
        <div>
          <div class="w60">PHP</div>
          <p>熟练：最流行的网站语言，简单。</p>
        </div>
        <div>
          <div class="w60">Python</div>
          <p>熟练：做过爬虫。</p>
        </div>
        <div>
          <div class="w60">MySql</div>
          <p>熟练：简单的与数据库交互。</p>
        </div>
        <div>
          <div class="w60">Linux</div>
          <p>熟练：SUSE，Ubuntu，Redhat比较喜欢的发行版。</p>
        </div>
      </div>
    </div>
    <div class="work">
      <div class="top">
        <div>Work</div>
        <img src="images/ico/ico_work.png" />
      </div>
      <div class="workContent">
        <div>
          <div>
            <div><img src="images/work_arr.png" /></div>
            <div class="title">迅雷</div>
          </div>
          <ol>
            <li>创立thunderjs</li>
            <li>亿级2c页面</li>
          </ol>
        </div>
        <div>
          <div>
            <div><img src="images/work_arr.png" /></div>
            <div class="title">腾讯</div>
          </div>
          <ol>
            <li>广告投放，审核系统</li>
            <li>开发chrome扩展</li>
          </ol>
        </div>
        <div>
          <div>
            <div><img src="images/work_arr.png" /></div>
            <div class="title">商汤</div>
          </div>
          <ol>
            <li>带领10+人团队</li>
            <li>重构senseface</li>
          </ol>
        </div>
      </div>
    </div>
    <div class="contact">
      <div class="top">
        <div>Contact</div>
        <img src="images/ico/ico_con.png" />
      </div>
      <div class="contactContent">
        <a href="mailto:13631624455@163.com?subject=非常高兴认识你&body=我访问了你的网址！~~" title="给我发邮件">
          <img src="images/contact/email.png" />
        </a>
        <a href="tencent://message/?uin=1920171103" title="QQ联系">
          <img src="images/contact/qq.png" />
        </a>
        <a href="https://www.baidu.com/baidu?word=mdn" title="搜一下" target="_blank">
          <img src="images/contact/baidu.png" />
        </a>
      </div>
    </div>
  </div>
  <div class="footer">Copyright &copy;2016 JiaBinLi All Rights Reserved</div>
  <div class="scrollTop" id="scrollTop"></div>
  <div id="contextMenu">
    <ul id="music_control">
      <li><img src="images/menu/music.png" /></li>
      <li id="music_status">播放音乐</li>
    </ul>
    <ul id="music_next">
      <li></li>
      <li>换一首歌</li>
    </ul>
    <ul id="context_reload">
      <li><img src="images/menu/refresh.png" /></li>
      <li>刷新页面</li>
    </ul>
    <ul id="contact_me">
      <li><img src="images/menu/man.png" /></li>
      <li>联系我</li>
    </ul>
  </div>
  <div id="loading">
    <img src="./images/loading.gif" />
  </div>
  <audio loop="loop" id="music_audio"></audio>
</body>

</html>